<template>
  <div class="w12">
    <div class="jl_list">
      <div class="jl_list_item">
        <span class="w12" style="color:gray;"><em class="font_red" v-if="required">*</em>{{label || '上传图片'}}</span>
      </div>
    </div>
    <div class="w12 list_up_img">
      <div class="img_item bor_bottom">
        <template v-for="(item,index) in value">
          <div class="img_case">
            <em @click="del(index)" v-if="icoShow">×</em>
            <img :src="item.base64 == null ?item.FILE_URL :item.base64" :preview="preview">
          </div>
        </template>
        <template v-if="icoShow">
          <i class="fa fa-camera" @click="choose"></i>
        </template>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'jl-images',
    props: {
      label: {type: String},
      upload: {type: Boolean},
      required: {type: Boolean},
      value: {
        type: Array,
        default() {
          return []
        }
      },
      icoShow: {
        type: Boolean,
        default: true
      },
      preview: {type: Number, default: 1}
    },
    methods: {
      choose() {
        this.$natives.chooseImages().then(v => {
          if (this.upload) {
            let files = []
            for (let i = 0; i < v.length; i++) {
              this.$natives.upload(v[i].base64).then(fileData => {
                Object.assign(v[i], fileData)
                files.push(v[i])
                if (i == v.length - 1) this.add(files)
              })
            }
          } else {
            this.arr(v)
          }
        })
      },
      del(i) {
        this.value.splice(i, 1)
        this.$emit('input', this.value)
      },
      add(arr) {
        for (let i = 0; i < arr.length; i++) {
          this.value.push(arr[i])
        }
        this.$emit('input', this.value)
      },
    },
  }
</script>

<style scoped>

</style>
